<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- AdThrive Head Tag Manual -->
    <script data-no-optimize="1" data-cfasync="false">
      (function (w, d) {
        w.adthrive = w.adthrive || {};
        w.adthrive.cmd = w.adthrive.cmd || [];
        w.adthrive.plugin = "adthrive-ads-manual";
        w.adthrive.host = "ads.adthrive.com";
        var s = d.createElement("script");
        s.async = true;
        s.referrerpolicy = "no-referrer-when-downgrade";
        s.src =
          "https://" +
          w.adthrive.host +
          "/sites/643436a4e6d20859e40a446b/ads.min.js?referrer=" +
          w.encodeURIComponent(w.location.href) +
          "&cb=" +
          (Math.floor(Math.random() * 100) + 1);
        var n = d.getElementsByTagName("script")[0];
        n.parentNode.insertBefore(s, n);
      })(window, document);
    </script>
    <!-- End of AdThrive Head Tag -->

    <!-- Global site tag (gtag.js) - Google Analytics -->

    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-6"
    ></script>

    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "UA-79254642-6");
    </script>
    <script>
      var getOutboundLink = function (url) {
        gtag("event", "click", {
          event_category: "outbound",
          event_label: url,
          transport_type: "beacon",
          event_callback: function () {
            document.location = url;
          },
        });
      };
    </script>

    <meta charset="utf-8" />
    <title>Network Graph &#124; the D3 Graph Gallery</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta
      name="description"
      content="How to build a network chart with Javascript and D3.js: from the most basic example to highly customized examples."
    />
    <meta
      name="keywords"
      content="Data,Dataviz,Datavisualization,Javascript,D3,D3.js,network graph"
    />
    <meta name="author" content="Yan Holtz" />
    <link rel="icon" href="img/logo/D3_single_small.png" />

    <meta
      property="og:title"
      content="Network Graph &#124; the D3 Graph Gallery"
    />
    <meta property="og:image" content="img/overview_RGG.png" />
    <meta
      property="og:description"
      content="How to build a network graph with Javascript and D3.js: from the most basic example to highly customized examples."
    />

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Custom fonts for this template -->
    <link
      href="vendor/font-awesome/css/font-awesome.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Kaushan+Script"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700"
      rel="stylesheet"
      type="text/css"
    />

    <!-- Custom styles for this template -->
    <link href="css/agency.css" rel="stylesheet" />

    <!-- JQUERY -->
    <script src="vendor/jquery/jquery.min.js"></script>

    <!-- PRISM -->
    <script src="LIB/prism.js"></script>
    <link href="LIB/prism.css" rel="stylesheet" />
  </head>

  <body id="page-top">
    <!-- THIS ALLOWS TO INSERT THE MENU THAT IS STORED IN A MENU.HTML FILE-->
    <nav class="navbar navbar-expand-lg fixed-top" id="mainNav"></nav>
    <script>
      $(function () {
        $("#mainNav").load("html_chunk/menu.html");
      });
    </script>

    <!-- THIS ALLOWS TO INSERT THE MODAL OF THE MENU THAT IS STORED IN A MENU_MODAL.HTML FILE-->
    <div id="modal_menu_insertion"></div>
    <script>
      $(function () {
        $("#modal_menu_insertion").load("html_chunk/menu_modal.html");
      });
    </script>

    <!-- Header -->
    <header class="masthead" style="padding-top: 150px; padding-bottom: 80px">
      <div class="textlanding">
        <h1>Network graph</h1>
        <hr class="short_hr" />
        <br />
        <ul class="list-inline social-buttons">
          <li class="list-inline-item">
            <a href="https://twitter.com/R_Graph_Gallery">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li class="list-inline-item social-buttons">
            <a href="https://github.com/holtzy">
              <i class="fa fa-github" style="color: white"></i>
            </a>
          </li>
          <li class="list-inline-item social-buttons">
            <a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
              <i class="fa fa-linkedin"></i>
            </a>
          </li>
          <li class="list-inline-item social-buttons">
            <a href="https://www.yan-holtz.com">
              <i class="fa fa-home"></i>
            </a>
          </li>
        </ul>
        <br /><br />
        <p style="max-width: 700px; margin: auto">
          This is the
          <a href="https://www.data-to-viz.com/graph/network.html"
            >network graph</a
          >
          section of the gallery. If you want to know more about this kind of
          chart, visit
          <a href="https://www.data-to-viz.com/graph/network.html"
            >data-to-viz.com</a
          >. If you're looking for a simple way to implement it in d3.js, pick
          an example below.
        </p>
      </div>
    </header>

    <!-- THIS ALLOWS TO INSERT THE ADVERTISEMENT BANNER THAT IS STORED IN A BANNER.HTML FILE-->
    <div id="position_for_images"></div>
    <script>
      $(function () {
        $("#position_for_images").load("html_chunk/images.html");
      });
    </script>

    <section class="bg" id="portfolio" style="padding-top: 10px">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <p class="mySeryTitle">A note on input data format</p>
            <hr />
            <p>
              Building a network chart requires information on <u>nodes</u> and
              <u>links</u>. This information can be stored in many different
              format as described
              <a href="https://www.data-to-viz.com/graph/network.html">here</a>.
              <code>Json</code> format is the most convenient way to work with
              <code>d3.js</code> and looks basically like that:
            </p>
            <div id="summary">
              <div class="collapse" id="collapseSummary">
                <pre
                  class="language-js"
                ><code id="codejs" contenteditable="false"><xmp>{ "nodes": [
  { "id": 1, "name": "A" },
  { "id": 2, "name": "B" }
],
"links": [
  { "source": 1, "target": 2 }
]}</xmp></code></pre>

                <p>
                  It is unlikely that your data are currently at this format.
                  You probably need to <u>reformat</u> your data first using
                  another tool like <code>R</code>. The
                  <a href="graph/network_data_format.html"
                    >following document</a
                  >
                  gives a few example on how to reformat the most common types
                  of input to get a <code>json</code> file.
                </p>
                <a
                  class="btn btn-secondary btn-md text-uppercase"
                  href="graph/network_data_format.html"
                  >Reformat your data to Json</a
                >
              </div>
              <a
                class="collapsed"
                data-toggle="collapse"
                href="#collapseSummary"
                aria-expanded="false"
                aria-controls="collapseSummary"
              ></a>
            </div>
          </div>

          <div class="col-lg-6">
            <p class="mySeryTitle">A note about force</p>
            <hr />
            <p>
              The challenge in network diagram is to find out smart X and Y
              coordinates for each node.<br /><br />In d3, it is done using
              force and simulation. Different forces?
            </p>
            <div id="summary">
              <div class="collapse" id="collapseSummary2">
                <ul>
                  <li>
                    <u>Centering</u> (attracts every node to a specific
                    position)
                  </li>
                  <li>
                    <u>Collision</u> (consider nodes as circles with radius and
                    try to avoid overlapping)
                  </li>
                  <li>
                    <u>Links</u> (pushes linked nodes together, according to a
                    link distance)
                  </li>
                  <li>
                    <u>Many-Body</u> (apply general attraction (if positive) or
                    repulsion (if negative) between nodes)
                  </li>
                  <li>
                    <u>Positioning</u> (push each node towards a desired
                    position).
                  </li>
                </ul>
                <a
                  class="btn btn-secondary btn-md text-uppercase"
                  target="_blank"
                  href="https://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03"
                  >Understand force parameters</a
                >
              </div>
              <a
                class="collapsed"
                data-toggle="collapse"
                href="#collapseSummary2"
                aria-expanded="false"
                aria-controls="collapseSummary"
              ></a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="bg" id="portfolio" style="padding-top: 10px">
      <div class="container">
        <br /><br /><br /><br />
        <div class="mySeryTitle">Step by step</div>
        <hr />
        <div id="portfolio-items" class="row">
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" href="graph/network_basic.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Most basic</p>
                  <hr />
                  <p class="explanation_portfolio">
                    The most basic network graph you can do in d3.js. Keeping
                    only the core code.<br /><br />Input format: Json
                  </p>
                </div>
              </div>
              <img class="img-fluid" src="img/graph/network_basic.png" alt="" />
            </a>
          </div>
        </div>

        <br /><br /><br /><br />
        <div class="mySeryTitle">Interactivity</div>
        <hr />
        <p>
          Interactivity can be used for several reasons. First of all, adding a
          tooltip to each node is very useful when many nodes are drawn and
          annotation is impossible. Then dragging. Then highlighting
          relationships of a node.
        </p>

        <br /><br /><br /><br />
        <div class="mySeryTitle">Template</div>
        <hr />
        <p>A template based on the co-authors network of a researcher.</p>

        <br /><br /><br /><br />
        <div class="mySeryTitle">Selection of blocks</div>
        <hr />
        <p>
          A selection of examples showing the application of the basic concept
          to real life dataset.
        </p>
        <div id="portfolio-items" class="row">
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a
              class="portfolio-link"
              href="https://beta.observablehq.com/@mbostock/d3-force-directed-graph"
            >
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>
                    Network of character co-occurrence in <i>Les Misérables</i>
                  </p>
                  <hr />
                  <p class="explanation_portfolio">
                    A famous network graph by Mike Bostock showing character
                    co-occurrence in a book.
                  </p>
                </div>
              </div>
              <img
                class="img-fluid showBlock"
                src="img/block/block_networkMiserable.png"
                alt="network graph les miserables"
              />
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" href="https://github.com/d3/d3-force">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>D3-force documentation</p>
                  <hr />
                  <p class="explanation_portfolio">
                    The d3-force documentation on github is invaluable. A must
                    read before diving into networks in d3.
                  </p>
                </div>
              </div>
              <img
                class="img-fluid showBlock"
                src="img/block/block_networkDoc.png"
                alt="circular barchart"
              />
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a
              class="portfolio-link"
              href="https://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03"
            >
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>D3-force testing ground</p>
                  <hr />
                  <p class="explanation_portfolio">
                    This example allows you to play with force parameters and
                    see their effect in real time.
                  </p>
                </div>
              </div>
              <img
                class="img-fluid showBlock"
                src="img/block/block_networkTesting.png"
                alt="network diagram testing ground"
              />
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- ======================================================================= -->

    <!-- ============================ RELATED SECTION ============================ -->
    <section
      class="bg-light"
      id="portfolio_landing"
      style="padding-top: 30px; padding-bottom: 30px"
    >
      <div class="container">
        <p class="mySeryTitle">Related chart types</p>
        <hr />
        <div class="row">
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="chord.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Chord150.png" alt="" />
            </a>
            <div class="captionPortfolio">Chord diagram</div>
          </div>
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="network.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Network150.png" alt="" />
            </a>
            <div class="captionPortfolio">Network</div>
          </div>
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="sankey.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Sankey150.png" alt="" />
            </a>
            <div class="captionPortfolio">Sankey</div>
          </div>
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="arc.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Arc150.png" alt="" />
            </a>
            <div class="captionPortfolio">Arc diagram</div>
          </div>
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="bundle.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Bundle150.png" alt="" />
            </a>
            <div class="captionPortfolio">Edge bundling</div>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================ CONTACT SECTION ============================ -->

    <!-- ANCHOR -->
    <a name="contactanchor"></a>

    <section id="contact" class="bg" style="background-color: white"></section>

    <!-- THIS ALLOWS TO INSERT THE CONTACT CHUNK THAT IS STORED IN A CONTACT.HTML FILE-->
    <script>
      $(function () {
        $("#contact").load("html_chunk/contact.html");
      });
    </script>

    <!-- ============================ FOOTER SECTION ============================ -->
    <footer class="bg-light" id="myFooter"></footer>

    <!-- THIS ALLOWS TO INSERT THE FOOTER THAT IS STORED IN A FOOTER.HTML FILE-->
    <script>
      $(function () {
        $("#myFooter").load("html_chunk/footer.html");
      });
    </script>

    <!-- ============================ -->

    <!-- =============== JAVASCRIPT SECTION =============== -->

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Contact form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/agency.min.js"></script>

    <!-- Activate the bootstrap tooltip, must be after jQuery load -->
    <script>
      $(function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>

    <!--============================== -->
  </body>
</html>
